import 'package:flutter/material.dart';
import 'package:flutter_douban/main_page/store/page/store_category_page.dart';
import 'package:flutter_douban/model/store_category_model.dart';
import 'package:flutter_douban/tool_views/cached_network_Image.dart';

class StoreCategoryView extends StatefulWidget {
  final List<StoreCategoryModel> list;

  const StoreCategoryView({Key? key,required this.list}) : super(key: key);

  @override
  _StoreCategoryViewState createState() => _StoreCategoryViewState();
}

class _StoreCategoryViewState extends State<StoreCategoryView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(left: 12,right: 12,top: 10),
      height: 230,
      child: GridView.builder(
          itemCount: widget.list.length,
          physics: NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
              crossAxisCount: 5,
              //纵轴间距
              mainAxisSpacing: 8.0,
              //横轴间距
              crossAxisSpacing: 18.0,
              //子组件宽高长度比例
              childAspectRatio: 0.9),
          itemBuilder: (BuildContext context, int index) {
            //Widget Function(BuildContext context, int index)
            return _getItemContainer(widget.list[index]);
          }),
    );;
  }

  Widget _getItemContainer(StoreCategoryModel model) {
    return InkWell(
      child: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            CachedImage(url: model.i!, width: 34, height: 34),
            SizedBox(height: 4,),
            Text(model.n!,
                style: TextStyle(
                  fontSize: 12,
                  color: Colors.black54,)),
          ],
        ),
      ),
      onTap: (){
        Navigator.of(context).push(MaterialPageRoute(builder: (_) {
          return StoreCategoryPage(title: model.n!,);
        }));
      },
    );
  }
}
